<template>
  <h2 class="px-4 text-2xl font-bold text-gray-900">
    {{ $t('pagePolicies.networkServices') }}
  </h2>
  <div v-if="!modifySSHPolicyDisabled" class="px-4 py-6">
    <h2 class="text-base font-semibold leading-7 text-gray-900">
      {{ $t('pagePolicies.ssh') }}
    </h2>
    <span class="mt-1 mr-72 text-sm leading-6 text-gray-600">
      {{ $t('pagePolicies.sshDescription') }}
    </span>
    <el-switch
      v-model="sshProtocolState"
      @change="changeSshProtocolState"
      :active-text="$t('global.status.enabled')"
      :inactive-text="$t('global.status.disabled')"
    />
  </div>

  <div class="px-4 py-6">
    <h2 class="text-base font-semibold leading-7 text-gray-900">
      {{ $t('pagePolicies.ipmi') }}
    </h2>
    <span class="mt-1 mr-56 text-sm leading-6 text-gray-600">
      {{ $t('pagePolicies.ipmiDescription') }}
    </span>
    <el-switch
      v-model="ipmiProtocolState"
      @change="changeIpmiProtocolState"
      :active-text="$t('global.status.enabled')"
      :inactive-text="$t('global.status.disabled')"
    />
  </div>
</template>

<script setup lang="ts">
import { usePoliciesStore } from '@/store/UserSecurity/Policies/PoliciesStore';

const policesStore = usePoliciesStore();
await policesStore.getNetworkProtocolStatus();

const modifySSHPolicyDisabled = ref(
  import.meta.env.VUE_APP_MODIFY_SSH_POLICY_DISABLED === 'true',
);
const sshProtocolState = computed({
  get() {
    return policesStore.sshProtocolEnabled;
  },
  set(newValue: number) {
    return newValue;
  },
});
const ipmiProtocolState = computed({
  get() {
    return policesStore.ipmiProtocolEnabled;
  },
  set(newValue: number) {
    return newValue;
  },
});

const changeIpmiProtocolState = (state: any) => {
  policesStore
    .saveIpmiProtocolState(state)
    .then((message: string) =>
      ElNotification({
        type: 'success',
        message,
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        type: 'error',
        message,
      }),
    );
};
const changeSshProtocolState = (state: any) => {
  policesStore
    .saveSshProtocolState(state)
    .then((message: string) =>
      ElNotification({
        type: 'success',
        message,
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        type: 'error',
        message,
      }),
    );
};
</script>
